<template>
    <el-container>
      <el-header class="header">
        <div class="logo">
            <div class="header-left">
              <RouterLink to="/">
                <img style="height: 80px; width: 80px;" class="router-logo" src="/static/imgs/logo.png" alt="logo" />
              </RouterLink>
              <RouterLink to="/">
                <strong class="title" style="color: rgb(71, 171, 240);">sc</strong>
                <strong class="title" style="color: black;">Nucleome</strong>
              </RouterLink>
            </div>
            <div class="header-right" v-if="isMobile">
              <el-dropdown class="menu-icon" ref="dropdown">
                <el-button>
                  <el-icon><Operation /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <RouterLink class="router-item" to="/" @click="closeDropdown">Home</RouterLink>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <RouterLink class="router-item" to="/data/none/none" @click="closeDropdown">Data</RouterLink>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <a href="https://sc3dg.readthedocs.io/" class="router-item" target="_blank">STARK</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <RouterLink class="router-item" to="/helper" @click="closeDropdown">Helper</RouterLink>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
        </div>
        <div v-if="!isMobile">
          <div class="routers">
            <RouterLink class="router-item" to="/">Home</RouterLink>
            <RouterLink class="router-item" to="/data/none/none">Data</RouterLink>
            <a href="https://sc3dg.readthedocs.io/" class="router-item" target="_blank">STARK</a>
            <RouterLink class="router-item" to="/helper">Helper</RouterLink>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="container">
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" :key="$route.path" />
            </keep-alive>
          </router-view> 
          <el-backtop :right="100" :bottom="100" style="background: #F3F5FA" />
        </div>
      </el-main>
      <el-divider style="width: 80%; margin: 20px 10%"></el-divider>
      <el-footer>
        <div class="footer-container">
          <div class="rights">
            <div class="rights-logo"><strong>WuLAB</strong></div>
            <div class="rights-text">
              Copyright &copy; {{ new Date().getFullYear() }}. All rights reserved.
            </div>
          </div>
          <div class="address">
            Address：1/F, 12 Building, 8 Life Park Road, ZGC Life Science Park, Changping District
          </div>
        </div>
      </el-footer>
    </el-container>
  </template>
  
  <script setup>
    import { RouterLink, RouterView } from 'vue-router'
    import { ref, onMounted, onUnmounted } from 'vue'
    import _ from 'lodash'
    import { get, post, } from '@/axios/api';
  
    let isMobile = ref(window.innerWidth <= 768)
    let dropdown = ref()

    const resize = window.addEventListener('resize', _.debounce(() => {
      isMobile.value = window.innerWidth <= 768
    }, 300))
  
    onMounted(() => {
      resize
    })

    function closeDropdown() {
      dropdown.value.handleClose()
    }
  
    onUnmounted(() => {
      window.removeEventListener('resize', resize);
    })
  </script>
  
  
  <style lang="scss" scoped>
  
    .header {
        width: 85%;
        display: flex;
        font-size: 25px;
        margin: auto;
        margin-top: 20px;
        line-height: 60px;
        justify-content: space-between;
        align-items: center;
    }
  
    .header-left {
      display: flex;
      align-items: center;
    }
  
    .container {
      width: 85%;
      margin: auto;
  
    }
  
    .menu-icon {
      margin: 20px;
    }
  
    .logo {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
  
    .title {
      font-family: Playfair
    }
  
    a {
      text-decoration: none;
    }
  
    .router-logo {
      margin-right: 20px;
      vertical-align: middle;
    }
    
    .router-item {
      margin-right: 20px;
      text-align: center;
      padding: auto;
      color: rgba(0, 0, 0, 0.5);
      font-family: SourceSansPro;
    }
  
    .footer-container {
      width: 80%;
      display: flex;
      margin: auto;
      justify-content: space-between;
      text-align: center;
    }
  
    .rights {
      display: flex;
      margin-left: 20px;
      padding-right: 20px;
      margin-right: 5%;
      align-items: center;
    }
    .rights div {
      margin-right: 10px;
    }
  
    .rights-logo {
      font-family: Playfair;
      font-size: larger;
    }
  
    .rights-text {
      font-size: small;
    }
  
    .address {
      font-size: small;
    }

    @media screen and (max-width: 768px) {
      .header {
        width: 100%;
      }

      .container {
        width: 100%;
      }

      .footer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: auto;
        justify-content: space-between;

        .rights {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin: auto;
          justify-content: space-between;
        }
      }
    }
  </style>
  